<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="李金波">
	<link rel="icon" href="./set_password.ico">
	<link rel="stylesheet" href="./cryptoMenu.css">
	<title>cryptoMenu</title>
</head>
<script src="/js/jq1.11.3.min.js"></script>
<script src="/js/vue2.6.10.min.js"></script>
<script src="/js/jqajax.js"></script>

<body>
	<div id="app">
		<!-- 密码类型 -->
		<div class="redio-max mb30">
			<form name="selectfrom">
				<label v-for="(item, index) in cryptoType" :key="index" @click="selectRadio">
					<div class="radio-item">
						<input name="radioitem" type="radio" :value="item" v-model="selectfrom" />
						<div>{{ item }}</div>
					</div>
				</label>
			</form>
		</div>
		<!-- 原文 -->
		<textarea v-model="content" cols="50" rows="5" style="width:100%;" placeholder="请输入需要加密的内容"></textarea>
		<div v-if="selectfrom == 'aes'">
			<span>密匙</span><input style="width:30%;" v-model="aesKey" type="text" placeholder="请输入16位密匙key">
			<span>偏移</span><input style="width:30%;" v-model="aesIv" type="text" placeholder="请输入16位偏移iv">
		</div>
		<div class="foot_but">
			<button class="copy-but" type="button" @click="cryptoBut(1)">加密</button>
			<button v-if="selectfrom == 'aes'" class="copy-but" type="button" @click="cryptoBut(2)">解密</button>
		</div>
		<!-- 结果展示 -->
		<div id="result-text">{{ result }}</div>
		<!-- 生成历史 -->
		<ol id="createdHistory">
			<li class="history-item" style="width:auto;" @click="showHistory(item)" v-for="(item, index) in historyList" :key="index">[ {{ item.oldDoc }} ] [{{ item.cryptoType }}]>>> [ {{ item.cryptoDoc }} ]</li>
		</ol>
	</div>

	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					content: '',
					selectfrom: 'md5',
					aesKey: '1111222233334444',
					aesIv: '5555666677778888',
					result: 'hello',
					historyList: [],
					cryptoType: ['md5', 'sha1', 'sha256', 'sha512', 'aes']
				}
			},
			methods: {
				// aesType 1加密 2解密
				cryptoBut(aesType) {
					if (!this.content) {
						return alert('请输入需要加密的内容')
					}
					let url = '/createCrypto'
					let params = {
						content: this.content,
						type: this.selectfrom
					}
					if (this.selectfrom == 'aes') {
						url = '/aesCrypto'
						params = {
							content: this.content,
							key: this.aesKey,
							iv: this.aesIv,
							type: aesType
						}
					}
					apiPostJson(url, params).then(res => {
						this.result = res.data
						this.historyList.push({
							oldDoc: this.content,
							cryptoType: this.selectfrom,
							cryptoDoc: this.result
						})
					})
				},
				// 选择加密类型清空结果
				selectRadio() {
					this.result = ''
				},
				// 显示历史信息
				showHistory(item) {
					console.log(item, '-->>> item')
				}
			}
		})
	</script>
</body>

</html>